<script setup lang="ts">
import { ref } from 'vue';

const activeTab = ref('general');
</script>

<template>
  <div class="community-rules-container">
    <div class="rules-header">
      <h1>路趣智行社区公约</h1>
      <p class="subtitle">为了营造健康、积极、互助的社区环境，请所有用户遵守以下公约</p>
    </div>

    <div class="rules-content">
      <div class="rules-tabs">
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 'general' }"
          @click="activeTab = 'general'"
        >
          通用准则
        </div>
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 'travel' }"
          @click="activeTab = 'travel'"
        >
          游记发布规范
        </div>
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 'disaster' }"
          @click="activeTab = 'disaster'"
        >
          灾害信息规范
        </div>
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 'trade' }"
          @click="activeTab = 'trade'"
        >
          二手交易规范
        </div>
      </div>

      <div class="rules-detail">
        <div v-if="activeTab === 'general'" class="tab-content">
          <h2>通用准则</h2>
          <div class="rule-section">
            <h3>1. 尊重与包容</h3>
            <p>尊重所有社区成员，不发表歧视、侮辱、挑衅或攻击性言论。尊重不同文化、信仰和观点。</p>
          </div>
          
          <div class="rule-section">
            <h3>2. 真实与诚信</h3>
            <p>提供真实、准确的信息，不传播虚假或误导性内容。诚实对待每一次互动和交易。</p>
          </div>
          
          <div class="rule-section">
            <h3>3. 安全与隐私</h3>
            <p>保护个人隐私和他人隐私，不泄露敏感信息。遵守相关法律法规，不从事违法活动。</p>
          </div>
          
          <div class="rule-section">
            <h3>4. 积极与建设性</h3>
            <p>分享有价值的内容，提供建设性的反馈和建议。避免无意义的争论和负面情绪传播。</p>
          </div>
          
          <div class="rule-section">
            <h3>5. 知识产权</h3>
            <p>尊重知识产权，不侵犯他人著作权、商标权等权利。引用他人内容时应注明来源。</p>
          </div>
        </div>

        <div v-if="activeTab === 'travel'" class="tab-content">
          <h2>游记发布规范</h2>
          <div class="rule-section">
            <h3>1. 内容真实性</h3>
            <p>游记内容应基于真实经历，照片应为原创或获得授权。不得虚构经历或使用AI生成的虚假图片作为真实游记。</p>
          </div>
          
          <div class="rule-section">
            <h3>2. 安全责任</h3>
            <p>分享路线和体验时，应注明潜在风险和安全提示。不鼓励或美化危险行为，如擅自进入禁区、破坏自然环境等。</p>
          </div>
          
          <div class="rule-section">
            <h3>3. 环保意识</h3>
            <p>提倡"无痕旅行"理念，不宣传或展示破坏自然环境的行为。鼓励分享环保旅行经验和技巧。</p>
          </div>
          
          <div class="rule-section">
            <h3>4. 尊重当地文化</h3>
            <p>尊重旅行目的地的文化、习俗和居民，不发布冒犯或不尊重当地文化的内容。</p>
          </div>
          
          <div class="rule-section">
            <h3>5. 有价值的信息</h3>
            <p>游记应包含有用的信息，如路线描述、交通方式、住宿推荐、费用参考等，帮助其他用户规划旅行。</p>
          </div>
        </div>

        <div v-if="activeTab === 'disaster'" class="tab-content">
          <h2>灾害信息规范</h2>
          <div class="rule-section">
            <h3>1. 信息准确性</h3>
            <p>发布灾害信息时，必须确保信息准确、及时，并注明信息来源和时间。不传播未经证实的灾害信息。</p>
          </div>
          
          <div class="rule-section">
            <h3>2. 避免恐慌</h3>
            <p>描述灾害情况时应客观、冷静，避免使用夸张、煽动性的语言引起不必要的恐慌。</p>
          </div>
          
          <div class="rule-section">
            <h3>3. 提供有用信息</h3>
            <p>在报告灾害的同时，尽可能提供避险建议、救援信息或替代路线等有用信息，帮助其他用户应对灾害。</p>
          </div>
          
          <div class="rule-section">
            <h3>4. 尊重受灾者</h3>
            <p>发布灾害相关内容时，应尊重受灾者的隐私和尊严，不发布可能冒犯或伤害受灾者的内容。</p>
          </div>
          
          <div class="rule-section">
            <h3>5. 及时更新</h3>
            <p>如发布的灾害信息有变化，应及时更新或在评论中补充最新情况，避免过时信息误导他人。</p>
          </div>
        </div>

        <div v-if="activeTab === 'trade'" class="tab-content">
          <h2>二手交易规范</h2>
          <div class="rule-section">
            <h3>1. 商品描述</h3>
            <p>准确描述商品状况、使用年限、瑕疵等信息，提供清晰的实物照片，不得虚假宣传或隐瞒缺陷。</p>
          </div>
          
          <div class="rule-section">
            <h3>2. 合理定价</h3>
            <p>商品定价应合理，参考市场行情和物品实际状况，避免哄抬价格或恶意低价。</p>
          </div>
          
          <div class="rule-section">
            <h3>3. 诚信交易</h3>
            <p>遵守交易承诺，按约定时间发货或交付商品，不得无故取消交易或变更条件。</p>
          </div>
          
          <div class="rule-section">
            <h3>4. 禁售物品</h3>
            <p>不得出售违禁物品、假冒伪劣产品、侵权商品或可能危害他人安全的物品。</p>
          </div>
          
          <div class="rule-section">
            <h3>5. 安全交易</h3>
            <p>建议通过平台提供的安全交易渠道完成交易，避免平台外私下交易可能带来的风险。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="rules-footer">
      <p>本公约最终解释权归路趣智行平台所有，平台有权根据社区发展情况更新公约内容。</p>
    </div>
  </div>
</template>

<style scoped lang="less">
.community-rules-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
  
  .rules-header {
    text-align: center;
    margin-bottom: 40px;
    
    h1 {
      font-size: 32px;
      color: #FF7D00;
      margin-bottom: 16px;
    }
    
    .subtitle {
      font-size: 16px;
      color: #666;
    }
  }
  
  .rules-content {
    display: flex;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    
    .rules-tabs {
      width: 200px;
      background: #f8f8f8;
      padding: 20px 0;
      
      .tab-item {
        padding: 16px 20px;
        cursor: pointer;
        transition: all 0.3s;
        border-left: 3px solid transparent;
        
        &:hover {
          background: #f0f0f0;
        }
        
        &.active {
          background: #fff;
          color: #FF7D00;
          font-weight: 600;
          border-left: 3px solid #FF7D00;
        }
      }
    }
    
    .rules-detail {
      flex: 1;
      padding: 30px;
      
      .tab-content {
        h2 {
          font-size: 24px;
          color: #FF7D00;
          margin-bottom: 24px;
          padding-bottom: 12px;
          border-bottom: 1px solid #eee;
        }
        
        .rule-section {
          margin-bottom: 24px;
          
          h3 {
            font-size: 18px;
            margin-bottom: 12px;
            color: #444;
          }
          
          p {
            line-height: 1.6;
            color: #666;
          }
        }
      }
    }
  }
  
  .rules-footer {
    margin-top: 40px;
    text-align: center;
    color: #999;
    font-size: 14px;
    
    p {
      margin-bottom: 8px;
    }
  }
}

@media (max-width: 768px) {
  .rules-content {
    flex-direction: column;
    
    .rules-tabs {
      width: 100%;
      display: flex;
      overflow-x: auto;
      
      .tab-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        
        &.active {
          border-left: none;
          border-bottom: 3px solid #FF7D00;
        }
      }
    }
  }
}
</style>